<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>虚拟试戴（Web Demo）</title>
  <style>
    body{font-family: Arial; text-align:center; background:#222; color:#fff}
    #video{border:4px solid #333; margin-top:10px}
    .controls{margin-top:10px}
    select, button{padding:8px 12px; font-size:16px}
  </style>
</head>
<body>
  <h1>虚拟试戴 — Web Demo</h1>
  <div class="controls">
    <label>选择眼镜：</label>
    <select id="glassesSelect"></select>
    <button onclick="apply()">应用</button>
  </div>
  <div>
    <img id="video" src="/video_feed" width="720" />
  </div>
<script>
async function loadList(){
  const resp = await fetch('/glasses_list');
  const data = await resp.json();
  const sel = document.getElementById('glassesSelect');
  sel.innerHTML = '';
  data.forEach(name=>{
    const opt = document.createElement('option');
    opt.value = name;
    opt.text = name;
    sel.appendChild(opt);
  });
}
async function apply(){
  const sel = document.getElementById('glassesSelect');
  const name = sel.value;
  await fetch('/set_glasses', {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({name})});
  // 轻刷新 img，防缓存
  const img = document.getElementById('video');
  img.src = '/video_feed?rand=' + Math.random();
}
window.onload = loadList;
</script>
</body>
</html>